<template>
  <section class="payment-method-mask">
    <div class="blank" @click="handleClosePaymentMethod(1)"></div>
    <div class="method">
      <p class="title">支付方式</p>
      <ul>
        <li v-for="(item, index) in payments" @click="handleClosePaymentMethod(index)">
          <div class="left">
            <span>{{ item.name }}</span>
            <span v-show="item.is_online_payment ? false : true">{{
              item.description
            }}</span>
          </div>
          <svg class="right svg">
            <use xlink:href="#check-mark" />
          </svg>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    payments: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    handleClosePaymentMethod(index) {
    index ?  this.$emit('handleClosePaymentMethod') : ''
    }
  }
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.payment-method-mask {
  color: #454545;
  .blank {
    .initial-children ();
    opacity: 0.4;
    background-color: #333333;
  }
  .method {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: #fff;
    .title {
      padding: 15px;
      background-color: #fafafa;
    }
    ul {
      li {
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
        color: #cccccc;
        .svg {
          .check-mark();
          background-color: #cccccc;
        }
      }
      & li:last-child {
        margin-bottom: 90px;
        color: #333333;
        .svg {
          background-color: #4cd964;
        }
      }
    }
  }
}
</style>